
@charset"utf-8";
$fontsize: 40;
@function r($px) {
    @return $px/$fontsize*1rem
}
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
html,
body {
    height: 100%;
    width: 100%;
}
.web {
    width: 100%;
    height: 100%;
    position: relative;
    background: #f7f7f7;
}
header {
    width: 100%;
    height: 2.2rem;
    position: absolute;
    top: 0;
}
footer {
    width: 100%;
    height: r(100);
    background: white;
    position: absolute;
    bottom: 0;
}
section {
    width: 100%;
    background: #ebebeb;
    top: 2.2rem;
    bottom: r(50);
    position: absolute;
    overflow-y: scroll;
}
/**/
.whole {
    width: 93.65%;
    height:r(88);
    margin: 0.35rem auto 0;
    font-size: r(20);
}
.img1 {
    float: left;
    display: block;
    width:r(22);
    height: r(37);
    line-height: r(88);
}
img {
    width: 100%;
    height: 100%;
}
.search {

    color: #666666;
    line-height: 1.5rem;
    font-size: r(26);
}
.choice {
    width: 100%;
    height: 2rem;
    background: white;
    margin-top: 0.325rem;
    border-top: 0.025rem solid #e3e3e3;
    border-bottom: 0.025rem solid #e3e3e3;
}
.whole2 {
    color: #666666;
    text-align: center;
    line-height: 1.5rem;
    font-size: r(33);
}
.Customer {
    width: 100%;
    height: r(302);
    background: white;
    .Customer1 {
        width: 100%;
        height: r(167);
        border-top: r(1) solid #e3e3e3;
        border-bottom: r(1) solid #e3e3e3;
        .Customer2 {
            margin: r(24) r(20);
            width: r(600);
            height: r(120);
            .Head_portrait {
                width: r(120);
                height: r(120);
            }
            ul {
                margin-left: r(16);
                width: r(320);
                height: r(120);
            }
            ul>li:nth-child(1) {
                font-size: r(25);
                padding-top: r(5);
            }
            ul>li:nth-child(2) {
                padding-top: r(8);
                font-size: r(21);
                color: #999999;
                line-height: r(36);
            }
            .Remarks {
                color: #666666;
                width: r(120);
                height: r(48);
                border: r(1) solid #949494;
                margin-top: r(73);
                border-radius: r(5);
                font-size: r(22);
                text-align: center;
                line-height: r(48);
            }
        }
    }
    .consumption {
        border-right: r(1) solid #e3e3e3;
        width: r(300);
        height: r(95);
        margin-top: r(20);
        margin-left: r(20);
        font-size: r(23);
        color: #333333;
        ul {
            li {
                text-align: center;
            }
        }
        ul>li:nth-child(1) {
            padding-top: r(10);
        }
        ul>li:nth-child(2) {
            padding-top: r(17);
        }
    }
    .Order {
        width: r(300);
        height: r(95);
        margin-top: r(20);
        font-size: r(23);
        color: #333333;
        ul {
            li {
                text-align: center;
            }
        }
        ul>li:nth-child(1) {
            padding-top: r(10);
        }
        ul>li:nth-child(2) {
            padding-top: r(17);
        }
    }
}
.Order_condition {
    width: 100%;
    height: r(377);
    margin-top: r(30);
    padding: 0 0 0 r(20);
    background: white;
    font-size: r(23);
    ul {
        width: 100%;
        height: r(94);
        border-bottom: r(1) solid #e1e2e4;
        li {
            .img1 {
                width: r(54);
                height: r(50);
                margin-top: r(22);
                margin-right: r(16);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .consignment {
                font-size: r(23);
                width: r(530);
                height: r(25);
                margin-top: r(32);
            }
            .one {
                color: #d62d31;
                line-height: r(25);
            }
            .img2 {
                margin-left: r(25);
                width: r(16);
                height: r(23);
                margin-top: r(2);
            }
        }
    }
    .two{
        color: #848689;
    }
}
.consumption {
    width: r(300);
    height: r(95);

    margin-left: r(20);
    font-size: r(23);
    color: #333333;
    ul {
        li {
            text-align: center;
        }
    }
    ul>li:nth-child(1) {
        width: r(40);
        height: (37);
        margin: 0 auto;
        padding-top: r(10);
    }
}

#xiajiabg{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top :0;
    left: 0;
    z-index: 99;
    display: none;
}
.dialog{
    width: r(550);
    height: r(300);
    border-radius: r(10);
    background: #FFFFFF;
    position: absolute;
    left: r(45);
    top: r(464);
    z-index: 999;
    p{
        font-size: r(30);
        text-align: center;
        line-height: r(90);
    }
    input[type="text"]{
        width: r(492);
        height: r(60);
        border-radius: r(5);
        display: inline-block;
        border: r(1) solid #CCCCCC;
        position: absolute;
        top: r(84);
        left: r(26);
    }
    .soldoutbtn{
        width: 90%;
        height: r(145);
        border-top: r(1) solid #CCCCCC;
        line-height: r(145);
        position: absolute;
        bottom: 0;
        left: r(24);
        #xiajialeft{
            display: inline-block;
            width: r(233);
            height: r(78);
            letter-spacing: r(4);
            border: r(1) solid #CCCCCC;
            background: #FFFFFF;
            text-align: center;
            line-height: r(78);
            font-size: r(30);
            color: #666666;
            border-radius: r(5);
        }
        #xiajiaright{
             display: inline-block;
            width: r(235);
            height: r(80);
            letter-spacing: r(4);
            border-radius: r(5);
            background: #d62d31;
            text-align: center;
            line-height: r(78);
            font-size: r(30);
            color: white;
        }
    }
}

#productfinish{
    width: r(249);
    height: r(183);
    background: rgba(0,0,0,0.5);
    border-radius: r(10);
    position: absolute;
    top:r(500) ;
    left: r(196);
    z-index: 99;
    display: none;
    
    .finishimg{
        width: r(69);
        height: r(69);
        margin:  r(15) auto r(15) auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
    p{
        text-align: center;
        font-size:r(28) ;
        color: white;
    }
}
